<!-- 框架布局页面 -->
<template>
  <a-layout class="mainLayout">
    <a-layout-header v-if="blockShow.header" class="layoutHeader">
      <HeaderVue></HeaderVue>
    </a-layout-header>

    <a-layout>
      <a-layout-sider
        class="layoutSider"
        :width="themeStore.getSiderWidth"
        :collapsed="isCollapsed"
        :style="{ paddingTop: paddingStyle.paddingTop }"
        v-if="blockShow.sider"
      >
        <div class="siderView">
          <a-scrollbar
            :outer-style="{ flex: '1 0 0%', height: '0', overflow: 'hidden' }"
            style="height: 100%; overflow: hidden; overflow-y: auto"
          >
            <BasicMenu></BasicMenu>
          </a-scrollbar>
          <!-- <div
            class="exit"
            @click="handOut"
            :style="isCollapsed ? 'justify-content: center;' : 'padding:16px;'"
          >
            <icon-to-right
              style="background-color: var(--color-neutral-2); padding: 5px"
              size="16"
            />
            <span class="quit" v-show="!isCollapsed">退出登录</span>
          </div> -->
        </div>
      </a-layout-sider>

      <a-layout-content class="layoutContent" :style="paddingStyle">
        <!-- <TabBar v-if="themeStore.tabbarShow"></TabBar> -->
        <a-layout class="container">
          <Breadcrumb></Breadcrumb>

          <Page></Page>
        </a-layout>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, computed } from "vue";
import HeaderVue from "./component/Header/index.vue";
import Breadcrumb from "./component/Breadcrumb.vue";
import BasicMenu from "./component/BasicMenu/index.vue";
import TabBar from "./component/TabBar/index.vue";
import Page from "./page.vue";
import { useUserStore } from "@/stores/modules/user.js";
import { useThemeStore } from "@/stores/modules/theme.js";
import { throttle } from "@/utils/lib.js";

const isCollapsed = ref(false); //控制menu是否折叠
const userStore = useUserStore();
const themeStore = useThemeStore();

// 展示 头部 菜单栏是否展示
const blockShow = computed(() => {
  return {
    sider: themeStore.siderShow,
    header: themeStore.headerShow
  };
});

const paddingStyle = computed(() => {
  const paddingLeft = isCollapsed.value
    ? "48px"
    : `${themeStore.getSiderWidth}px`;
  const paddingTop = `${themeStore.getHeaderHeight}px`;

  return {
    paddingLeft: blockShow.value.sider ? paddingLeft : "0",
    paddingTop: blockShow.value.header ? paddingTop : "0"
  };
});

const resizeFun = () => {
  let width = window.innerWidth;
  if (width <= 1200) {
    isCollapsed.value = true;
  } else {
    isCollapsed.value = false;
  }
};
const _throttle = throttle(() => {
  resizeFun();
}, 500);
window.addEventListener("resize", () => {
  _throttle();
});

function handOut() {
  console.log("layout default  退出登录");
  // userStore.logout();
  userStore.logout();
}
</script>

<style lang="less" scoped>
.mainLayout {
  // height: 100vh;
  // height: 100dvh;
  background-color: @contentBg;

  .layoutHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    border-bottom: 1px solid var(--color-border);
  }
  .layoutSider {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    box-sizing: border-box;
    transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
    .siderView {
      height: 100%;
      display: flex;
      flex-direction: column;
      .exit {
        padding: 16px 0;
        cursor: pointer;
        // box-shadow: rgba(0, 0, 0, 0.08) 2px 0px 5px 0px;
        color: var(--color-text-2);
        display: flex;
        align-items: center;
        overflow: hidden;
        span {
          padding-left: 10px;
        }
      }
    }
  }
  .layoutContent {
    min-height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

    .container {
      height: 100%;
      padding: 0 20px;
      padding-bottom: 20px;
      .content {
        position: relative;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
